<template>
	<view class="mall page">
		<scroll-view class="scroll" scroll-y="ture">
		<mall-search v-model="name" @search="search" ></mall-search>
		<mall-top-bar  :bars="types" @changeType="changeType"></mall-top-bar>
		<mall-swiper v-if="!searchFlag&&type==0" :imgList="topBannerList" :full="true"></mall-swiper>
		<mall-banner v-if="!searchFlag&&type==0" :leftImg="leftBanner" :rightImgList="rightBannerList" ></mall-banner>
		<!-- <mall-menu></mall-menu> -->
		<mall-h-block  title="特色推荐" v-if="!searchFlag&&type==0&&topGoodsList&&topGoodsList.length>0" :items = "topGoodsList"></mall-h-block>
		<mall-v-block title="产品列表"  v-if="goodsList&&goodsList.length>0" :items="goodsList"></mall-v-block>
		</scroll-view>
	</view>
</template>

<script>
	import mallSwiper from '../../components/mall-swiper/mall-swiper.vue'
	import mallBanner from '../../components/mall-banner/mall-banner.vue'
	import mallMenu from '../../components/mall-menu/mall-menu.vue'
	import mallVBlock from '../../components/mall-v-block/mall-v-block.vue'
	import mallHBlock from '../../components/mall-h-block/mall-h-block.vue'
	import mallSearch from '../../components/mall-search/mall-search.vue'
	import mallTopBar from '../../components/mall-top-bar/mall-top-bar.vue'
	import { mall, mallGoods } from '@/api/home.js'
	import CONFIG from '@/config/index.js'
	import {mapState} from 'vuex'
 	export default {
		data() {
			return {
					banners : [],
					topGoodsList:[],
					goodsList:[],
					page:1,
					size:6,
					type:0,
					types:[],
					name:""
			}
		},
		onShareTimeline(){
			return {
			  title: `童仔美食商城欢迎您`,
			  query: `pid=${this.userId}`
			}
		},
		onShareAppMessage: function (res) {
			return {
			  title: `童仔美食商城欢迎您`,
			  path: `/pages/mall/mall?pid=${this.userId}`
			}
		  },
		onReachBottom(){
			this.page ++
			this.getList()
		},
		onPullDownRefresh(){
			this.page = 1
			this.goodsList = []
			this.getList()
		},
		methods:{
			search(name){
				this.page = 1
				this.getList(name)
			},
			changeType(index){
				if(index==0){
					this.type =0
				}else{
					this.type = this.types[index].id
				}
				this.types.forEach(bar => {
					if(bar.sel){
						bar.sel = false
					}
				})	
				this.types[index].sel = true
				//重制且获取新数据
				this.page = 1
				this.getList()
			},
			getList(name){
				mallGoods(this.page,this.size,this.type,name).then(res => {
					let list = res.data.filter(res => {
						res.minImg = CONFIG.IMG_HEAD + res.minImg
						return true
					})
					if(this.page ==1 ){ //重制
						this.goodsList = []
					}
					// this.page ++ 
					this.goodsList = this.goodsList.concat(list)
				})
			}
		},
		computed:{
			...mapState({
				userId:state=>state.user.user.id
			}),
			searchFlag(){
				if(this.name==null||this.name.trim()==''){
					return false
				}else{
					return true
				}
			},
			topBannerList(){
				let list = this.banners.filter(banner => banner.type==1&&banner.site==0)
				if(list&&list.length>0){
					return list[0].img.split(",").map(img => CONFIG.IMG_HEAD + img)
				}
				return []
			},
			leftBanner(){
				let list = this.banners.filter(banner => banner.type==1&&banner.site==1)
				if(list&&list.length>0){
					return CONFIG.IMG_HEAD + list[0].img.split(",")[0]
				}
				return null
			},
			rightBannerList(){
				let list = this.banners.filter(banner => banner.type==1&&banner.site==2)
				if(list&&list.length>0){
					return list[0].img.split(",").map(img => CONFIG.IMG_HEAD + img)
				}
				return []
			}
		},
		onShow() {
			mall().then(res => {
					this.banners = res.extra.banners
					this.types = res.extra.types
					this.types.unshift({name:'首页',sel:true})
					this.topGoodsList = res.extra.goodsList.filter(g => {
									g.minImg = CONFIG.IMG_HEAD + g.minImg
									return true
								})
			})
			this.getList()
		},
		components:{
			mallSwiper,mallMenu,mallBanner,mallVBlock,mallHBlock,mallSearch,mallTopBar
		}
	}
</script>

<style lang="stylus" scoped>
	.mall
		background-size 100% auto
		.scroll
			background-color #EFEFEF
			min-height 100%
</style>
